<template>
	<view>
		<view class="body">
			<view class="logo">
				<image src="../../static/logo.png" style="width: 200rpx;height: 200rpx;"></image>
			</view>
			<InputForm :type="register" ref='myComponent'></InputForm>
			<!-- <view class="card">
				<input type="text" v-model="nickName" placeholder="请输入昵称..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="password" placeholder="请输入密码..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="comfirmPassword" placeholder="请再次输入密码..." placeholder-class="text" />
			</view>
			
			<view class="card1">
				<input type="text" v-model="phone" placeholder="请输入手机号或邮箱..." placeholder-class="text" />
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
			</view>
			<view class="card">
				<input type="password" v-model="comfirmPassword" placeholder="请输入验证码..." placeholder-class="text" />
			</view> -->
			<view class="btn" @tap="gotoregister">立即注册</view>
			<!-- <view class="login" @click="register">
				<uni-icons type="arrow-right" size="45" color="#ffffff" class="img"></uni-icons>
			</view> -->
			

		</view>
		<view class="footer">
			<text class="">
			</text><text class="text" @click="login">登录账号</text>
			</text>
		</view>
	</view>
</template>

<script>
	import InputForm from "../../components/InputForm/InputForm.vue"
	import Valid from "../../config/valid.js"
	export default {
		components:{InputForm},
		data() {
			return {
				nickName: "",
				password: "",
				comfirmPassword: "",
				phone:"",
				code:"",
				format:"",
				getCodeText:"获取验证码",
				getCodeBtnColor:"rgb(174 174 174)",
				getCodeWaiting:false,
				register:"register",
				
			}
		},
		created() {
			uni.setStorage({
				key:'cur_page',
				data:'register'
			})
		},
		methods: {
			gotoregister() {
				var rules=[]
				let lst=this.$refs.myComponent.getlst()
				this.nickName=lst[0]
				this.password=lst[1]
				this.comfirmPassword=lst[2]
				this.phone=lst[3]
				this.code=lst[4]
				console.log(lst)
				
				//校验昵称
				var check=Valid.check(rules)
				check.add(this.nickName,[{strategy:'isNotEmpty',errorMsg:'用户名不能为空'}])//用户名是否存在提交之后统一判断
				var error=check.start()
				if(error!==undefined){
					console.log(error)
					uni.showToast({
						icon:'none',
						title:error
					})
					return
				}
				// check.start()
				
				//校验密码
				rules=[]
				check=Valid.check(rules)
				var str='checkPwd:'+this.comfirmPassword
				// check.add(this.password,[{strategy:'isNotEmpty',errorMsg:'密码不能为空'}])
				check.add(this.password,[{strategy:'isNotEmpty',errorMsg:'密码不能为空'},{strategy:'checkPwdFormat',errorMsg:'密码须由八个以上字符组成，至少包括一个字母和一个数字'},{strategy:str,errorMsg:'两次密码输入不一致'}])
				error=check.start()
				console.log(error)
				if(error!==undefined){
					console.log(error)
					uni.showToast({
						icon:'none',
						title:error
					})
					return
				}
				
				//校验联系方式
				rules=[]
				check=Valid.check(rules)
				check.add(this.phone,[{strategy:'isNotEmpty',errorMsg:'手机号不能为空'},{strategy:'NumberFormat',errorMsg:'手机号或邮箱不正确'}])
				error=check.start()
				console.log(error)
				if(error!==undefined){
					console.log(error)
					uni.showToast({
						icon:'none',
						title:error
					})
					return
				}
				console.log(uni.getStorageSync('already_reg'))
				if(uni.getStorageSync('already_reg')==='1'){
					uni.showToast({
						icon:'none',
						title:"联系方式已被注册"
					})
					return
				}
				//校验验证码
				rules=[]
				check=Valid.check(rules)
				check.add(this.code,[{strategy:'isNotEmpty',errorMsg:'验证码不能为空'},{strategy:'CheckCode',errorMsg:'验证码无效'}])
				error=check.start()
				console.log(error)
				if(error!==undefined){
					console.log(error)
					uni.showToast({
						icon:'none',
						title:error
					})
					return
				}
				this.format=uni.getStorageSync('format')
				if(this.format===""){
					uni.showToast({
						title:'手机号或邮箱填写有误',
						icon:"none"
					});
					return false;
				}
				// if (this.password !== this.comfirmPassword) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "两次密码不相同"
				// 	})
				// 	return
				// }
				this.$request.TokenRequest({
					url: '/user/register'
				}, {
					username: this.nickName,
					password: this.password,
					[this.format]:this.phone
				}).then(res => {
					console.log(res)
					if (res.state === 200) {
						uni.showModal({
							title: "提示",
							content: "您的ID号为:" + res.data.id,
							showCancel: false,
							confirmText: "复制到粘贴板",
							success() {
								uni.setClipboardData({
									data: res.data.id+'',
									success() {
										uni.showToast({
											icon: 'none',
											title: "已复制到粘贴板"
										})
									},
									fail(err) {
										console.log("err:"+err)
									}
								})
								uni.redirectTo({
									url: '../login/login'
								})
							}
						})
					}
				})
			},
			Timer(){},
			getCode(){
				let lst=this.$refs.myComponent.getlst()
				this.phone=lst[3]
				uni.hideKeyboard()
				if(this.getCodeWaiting){
					return;
				}
				// if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
				// 	console.log(this.phone)
				// 	uni.showToast({
				// 		title:'手机号填写有误',
				// 		icon:"none"
				// 	});
				// 	return false;
				// }
				this.getCodeText="发送中"
				this.getCodeWaiting=true;
				this.getCodeBtnColor="rgb(174 174 174)"
				
				setTimeout(()=>{
					uni.showToast({
						title:"已发送验证码",
						icon:"null"
					});
					this.code='1234';//默认1234
					this.setTimer();
				},1000)
			},
			setTimer(){
				let holdTime=60;
				this.getCodeText="重新获取（60）"
				this.Timer=setInterval(()=>{
					if(holdTime<=0){
						this.getCodeWaiting=false;
						this.getCodeBtnColor="rgb(174 174 174)"
						this.getCodeText="获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText="重新获取("+holdTime+")"
					holdTime--;
				},1000)
			},
			login() {
				uni.redirectTo({
					url: "../login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		margin: 0 auto;
		padding-top: 200rpx;
		width: 85%;

		.logo {
			text-align: center;
			width: 100%;
			padding-bottom: 50rpx;
		}

		.btn {
			color: #FFFFFF;
			background-color: #6869a8;
			margin: 50rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;
			text-align: center;
			
			// width: 70%;
			.text {
				font-size: 35rpx;
				color: #F1F1F1;
			}
		}
		.card1 {
			display: flex;
			background-color: #F5F5F5;
			// margin: 35rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;
			
			// .text {
			// 	font-size: 35rpx;
			// }
			.get-code {
					position: absolute;
					height: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					right: 0;
					padding: 12rpx 90rpx 15rpx 15rpx;
					z-index: 3;
					font-size: 25rpx;
					
					&:after { //点击以后，左边出现白色的线
						content: " ";
						width: 1upx; //宽度为1upx
						height: 50upx; //高度为50upx
						background-color: #A5A5A5;  //背景颜色为白色
						position: absolute;
						z-index: 3;
						margin-right: 100%;
						left: 0;
						top: 0;
					}
				}
		}
		.check{
			font-size:13px;
		}

		.login {
			background-color: #007AFF;
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			padding: 15rpx;
			border-radius: 120rpx;
			margin: 40rpx auto;
		}
	}

	.footer {
		width: 100%;
		position: absolute;
		bottom: 60rpx;
		text-align: center;

		.text {
			// font-weight: 600;
			font-size: 25rpx;
			margin: 0 15rpx;
		}
	}
</style>
